import { IdManager } from "../../utils/util";
import { AddInteractiveShape, CanvasContext, } from "./designType";
import { Dimension } from "./Dimension";
import { Glass } from "./Glass";
import { Mullion } from "./Mullion";
import { Point } from "./Point";
import { Shape } from "./Shape";
import { TopView } from "./TopView";
import { WindowOpen } from "./WindowOpen";

//银色铝（原色铝）：未经处理的铝材通常呈现银色的金属光泽。

// rgba(192, 192, 192, 1)：这是一个银灰色，接近铝材的自然色。
// 阳极氧化银色：处理后的铝材会更亮，稍微偏白的银色。

// rgba(210, 210, 210, 1)：一种略微明亮的银色，模拟阳极氧化铝。
// 深灰色铝：经过特殊处理的铝材可能呈现深灰或哑光效果。

// rgba(128, 128, 128, 1)：标准的深灰色，常用于哑光处理的铝型材。
// 黑色铝：一些铝型材经过表面处理或喷涂可以呈现黑色。

// rgba(30, 30, 30, 1)：接近铝型材的常见黑色，不反光的哑光效果。
// 古铜色铝：特殊场合下会使用的铝合金颜色。

// rgba(139, 69, 19, 1)：仿古铜色，带有一点棕色的金属色。

export class Frame {
  public id: string;
  public type?: 'rect' | 'hex';
  public dimension?: Dimension;    // 使用 Dimension 表示中梃的尺寸
  public shape?: Shape;
  public glass?: Glass; // 可选的窗扇和玻璃二选一
  public mullion?: Mullion;    // 可选的中梃
  public children: Frame[] = [];
  public opening?: WindowOpen; // 可选的窗扇
  public edgeWidth: number = 16;
  public pressStripWidth: number = 5
  public topView?: TopView;
  private addInteractiveShape: AddInteractiveShape;

  constructor(addInteractiveShape: AddInteractiveShape) {
    this.addInteractiveShape = addInteractiveShape;
    this.id = IdManager.getNextId("frame")
   }
  setShape(point: Point): void {
    if (point.type == 'rect') {
      const width = point.width;
      const height = point.height;
      const originX = point.x;
      const originY = point.y;
      if (width && height) {
        this.buildRectFrame(originX, originY, width, height);
        this.dimension = new Dimension(width, height, 50, 'mm');
        this.dimension.setStartPoint(originX, originY);
      }

    }
    else if (point.type == 'polygon') {

    }




  }

  setEdgeWidth(edgeWidth: number) {
    this.edgeWidth = edgeWidth;
  }

  buildRectFrame(
    originX: number,
    originY: number,
    width: number,
    height: number) {
    this.shape = new Shape();
    const startPoint = new Point(originX, originY)
    this.shape.setStartPoint(startPoint);

    const leftFrame = new Point(0, 0, "polygon", {
      vertices: [
        { x: 0, y: height },
        { x: this.edgeWidth, y: height - this.edgeWidth },
        { x: this.edgeWidth, y: this.edgeWidth },
        { x: 0, y: 0 }
      ],
      strokeColor: "rgba(30, 30, 30, 1)",
      fillColor: "rgba(192, 192, 192, 1)",
      lineWidth: 1,
    }
    )
    const topFrame = new Point(0, 0, "polygon", {
      vertices: [
        { x: width, y: 0 },
        { x: width - this.edgeWidth, y: this.edgeWidth },
        {x: this.edgeWidth, y:this.edgeWidth},
        { x: 0, y: 0 }
      ],
      strokeColor: "rgba(30, 30, 30, 1)",
      fillColor: "rgba(192, 192, 192, 1)",
      lineWidth: 1,
    }
    )
    const rightFrame = new Point(0, 0, "polygon", {
      vertices: [
        { x: width, y: height },
        { x: width - this.edgeWidth, y: height - this.edgeWidth },
        {x: width - this.edgeWidth, y:this.edgeWidth},
        { x: width, y: 0 }
      ],
      strokeColor: "rgba(30, 30, 30, 1)",
      fillColor: "rgba(192, 192, 192, 1)",
      lineWidth: 1,
    }
    )
    const bottmoFrame = new Point(0, 0, "polygon", {
      vertices: [
        { x: width, y: height },
        { x: width - this.edgeWidth, y:height- this.edgeWidth },
        {x: this.edgeWidth, y:height-this.edgeWidth},
        { x: 0, y: height }
      ],
      strokeColor: "rgba(30, 30, 30, 1)",
      fillColor: "rgba(192, 192, 192, 1)",
      lineWidth: 1,
    }
    )
    
    const points: Point[] = [leftFrame, topFrame, rightFrame, bottmoFrame];
    this.shape.pushPoints(points);
    this.buildGlass(startPoint, width, height);

  }

  buildGlass(
    startPoint: Point,
    width: number,
    height: number,
    glassNumber: number = 1) {
    this.glass = new Glass();
    this.glass.setStartPoint(startPoint);
    if (this.shape && this.shape?.points.length != 0) {
      this.glass.addGlass(this.edgeWidth, this.pressStripWidth,
        width, height);
    }
  }

  draw(ctx: CanvasContext): void {
    if (this.shape) {
      this.shape.draw(ctx);
      this.children.forEach(child => child.draw(ctx));
    }
    if (this.mullion) this.mullion.draw(ctx);
    if (this.opening) {
      this.opening.draw(ctx);
    } else if (this.glass) {
      this.glass.draw(ctx);
    }
  }

  drawDimension(ctx: CanvasContext): void {
    if (this.dimension) {
      this.dimension.draw(ctx)
      this.children.forEach(child => child.drawDimension(ctx));
    }
  }

  drawTopView(ctx: CanvasContext): void {
    if (this.topView) {
      this.topView.draw(ctx)
      this.children.forEach(child => child.drawDimension(ctx));
    }
  }
}
